<template>
  <div class="container width1200">
    <!-- <div class="bj">
      <img src="../../assets/bg.png" style="width: 100%;" alt="">
    </div> -->
    <!-- <span style="margin-left: 250px;">欢迎临时用地申请信息</span> -->
    <!-- <div class="title">
      <div class="logo"><img src="../../assets/logoSy.png" style="width: 100%;" alt=""></div>
      <div class="">
        <el-select
          size="small"
          style="width: 113px; border-radius: 2px"
          v-model="qxmc"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, idx) in qxmcOptions"
            :key="idx"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="">
        <el-select
          size="small"
          style="width: 113px; border-radius: 2px; color: #4eb8f8"
          v-model="sjbm"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, idx) in sjbmOptions"
            :key="idx"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="" style="font-size: 14px">
        <span>全国一体化在线政务服务平台</span>
        <span class="line"></span>
        <span>重庆市政府门户网站</span>
      </div>
      <div @click="loginOut" style="margin-right: 250px">
        <i class="el-icon-user"></i>
        退出登录
      </div>
    </div> -->
    <div style="display: flex; padding: 10px">
      <div style="width: 20%">
        <el-steps
          direction="vertical"
          style="margin: 10px 0"
          :active="activeStep"
          align-center
        >
          <el-step title="阅读须知"></el-step>
          <!-- <el-step title="在线填表"></el-step> -->
          <el-step title="上传资料"></el-step>
          <!-- <el-step title="取件方式"></el-step> -->
          <el-step title="信息确认"></el-step>
        </el-steps>
      </div>
      <div style="width: 80%; padding: 10px">
        <reading v-if="activeStep == 0" @goBack="goBack" @goStep="goStep" />
        <!-- <onlineForm v-if="activeStep == 1" @goStep="goStep" @goBack="goBack" /> -->
        <uploadData v-if="activeStep == 1" @goStep="goStep" @goBack="goBack" />
        <!-- <pickUp v-if="activeStep == 3" @goStep="goStep" @goBack="goBack" /> -->
        <infoSure v-if="activeStep == 2" @goStep="save" @goBack="goBack" />
      </div>
    </div>
    <!-- <footerInfoVue></footerInfoVue> -->

    <!-- <el-button style="margin-top: 12px;" type="primary" :disabled="activeStep == 0" @click="goStep(-1)">上一步</el-button>
    <el-button style="margin-top: 12px;" type="primary" :disabled="activeStep == 4" @click="goStep(1)">下一步</el-button> -->
  </div>
</template>
<script>

import uploadInfo from "./uploadInfo.vue";
import reading from "./modules/reading";
import infoSure from "./modules/infoSure";
import onlineForm from "./modules/onlineForm";
import pickUp from "./modules/pickUp";
import uploadData from "./modules/uploadData";
import footerInfoVue from "./modules/footerInfo.vue";
export default {
  components: {
    uploadInfo,
    reading,
    infoSure,
    onlineForm,
    pickUp,
    uploadData,
    footerInfoVue,
  },
  data() {
    return {
      qxmc: "重庆市",
      // qxmcOptions: [
      //   {
      //     label: "重庆市",
      //     value: "重庆市",
      //   },
      // ],
      // sjbm: "市级部门",
      // sjbmOptions: [
      //   {
      //     label: "市级部门",
      //     value: "市级部门",
      //   },
      // ],
      activeStep: 0,
      // fileList: [
      //   {
      //     name: "food.jpeg",
      //     url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      //   },
      //   {
      //     name: "food2.jpeg",
      //     url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      //   },
      // ],
      // ruleForm: {
      //   name: "张三",
      //   zjlx: "身份证",
      //   xmvalue: "酉阳临时用地项目",
      //   value: "自然人",
      //   zjhm: "5613231196808012836",
      //   tel: "13807596211",
      // },
      // rules: {},
      // currentPage4: 4,
      // options: [
      //   {
      //     label: "自然人",
      //     value: "自然人",
      //   },
      //   {
      //     label: "法人",
      //     value: "法人",
      //   },
      // ],
      // xmOptions: [
      //   {
      //     label: "酉阳临时用地项目",
      //     value: "酉阳临时用地项目",
      //   },
      //   {
      //     label: "彭水临时用地项目",
      //     value: "彭水临时用地项目",
      //   },
      // ],
      // tableData: [
      //   {
      //     xmbh: "自然人",
      //     xmmc: "张三",
      //     xmlx: "身份证照",
      //     xmyt: "561323196808012837",
      //     xmmj: "18646889009",
      //     xmzt: "酉阳临时用地项目",
      //   },
      //   {
      //     xmbh: "法人",
      //     xmmc: "李四",
      //     xmlx: "身份证照",
      //     xmyt: "561323196808012837",
      //     xmmj: "18646889009",
      //     xmzt: "酉阳临时用地项目",
      //   },
      // ],
    };
  },

  mounted() {
    let user = window.localStorage.getItem("userInfo");
    if (user) {
      this.userInfo = JSON.parse(user);
      // this.getProjectList();
    } else {
      this.$router.replace("/");
    }
    // 页头
    // document.querySelector(".header-site-sel").style.display = "block";
    // document.querySelector(".header-login-box").style.display = "inline-block";
    // document.querySelector(".logout-th").style.display = "inline-block";
    // document.querySelector(".login-th").style.display = "none";
    // document.querySelector(".register-th").style.display = "none";

    // 页尾
    // document.querySelector(".footer-bah").style.display = "block";
    // document.querySelector(".footer-zbdw").style.display = "block";
    // document.querySelector(".footer-fixed").style.display = "block";
    // document.querySelector(".footer-adr").style.display = "block";
    // document.querySelector(".footer-zfzc").style.display = "inline";
    // document.querySelector(".footer-dzjg").style.display = "inline";
    // document.querySelector(".footer-aqcx").style.display = "inline";
  },
  methods: {
    loginOut() {
      this.$confirm("确认退出登录？")
        .then((_) => {
          window.localStorage.clear();
          this.$router.replace("/");
        })
        .catch((_) => {});
    },
    save() {
      // alert('提交成功')
      this.$confirm("确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.activeStep = 1;
        })
        .catch(() => {
          this.activeStep = 1;
        });
    },
    goStep(step = 1) {
      let next = this.activeStep + step;
      console.log(next, "next");
      if (next > 3) next = 3;
      if (next < 0) next = 0;
      this.activeStep = next;
      // if (this.activeStep++ > 4) this.activeStep = 0;
    },
    goBack() {
      let next = this.activeStep;
      if (next > 0) {
        next--;
      } else {
        next = 0;
      }
      this.activeStep = next;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    uploadZl() {
      this.$refs.InfoDialog.show();
    },
    rowClassName({ row, rowIndex }) {
      row.xh = rowIndex + 1;
      if (row.xh < 10) {
        row.xh = "0" + row.xh;
      }
    },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePreview(file) {
    //   console.log(file);
    // },
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
    //       files.length + fileList.length
    //     } 个文件`
    //   );
    // },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`);
    // },
  },
};
</script>

<style scoped lang="less">
/deep/.el-input__inner {
  color: #4eb8f8;
}
.title {
  width: 100%;
  height: 128px;
  // position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  background: #4eb8f8;
  z-index: 5;
  .logo {
    width: 364px;
    margin-left: 250px;
  }
}
.line {
  display: inline-block;
  width: 2px;
  margin: 0 5px;
  height: 10px;
  background: #fff;
}
.el-icon-user {
  border: solid 1px #fff;
  border-radius: 20px;
  padding: 4px;
}

/deep/ .el-step__title.is-finish{
  color: #0c7cff !important;
}
</style>
